<template>
  <div class="accounts-box">
    <ListTab v-if="hasRouteAuth('crm:accounts:collectManage')" v-model="categoryId" :show-header="!showMobilePage" :tabs="categoryList" :mode="dimension" :mode-list="modeList" is-table @tabClick="tabClick"/>
    <ListTab v-else v-model="categoryId" :show-header="!showMobilePage" :tabs="categoryList" is-table @tabClick="tabClick"/>
    <accountsMonitor v-if="categoryId === 0" ref="accountsMonitor" :data-loading="loading" :count="data.count" :total="data.total" :dimension="dimension" @update="getWeiboNum" />
    <weibo v-if="categoryId === 1" ref="weibo" :dimension="dimension" @update="getWeiboNum" />
  </div>
</template>

<script>
import ListTab from '@/components/ListTab';
import accountsMonitor from './module/accountsMonitor';
import weibo from './module/weibo';
import { getWeiboNum } from '@/api/accounts';
import { hasRouteAuth } from '@/utils/permission';
import { mapState } from 'vuex';

export default {
  components: {
    ListTab,
    accountsMonitor,
    weibo
  },
  data() {
    return {
      data: {
        num: 0, // 待处理微博数
        count: 0, // 采集数
        total: 0 // 账号数量
      },
      loading: false,
      categoryId: 0,
      dimension: 0 // 0-达标,1-效果
    };
  },
  computed: {
    categoryList() {
      return [
        { id: 0, name: '账号' },
        { id: 1, name: '微博', num: this.dimension ? 0 : this.data.num }
      ];
    },
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    modeList() {
      return [
        { mode: 0, name: '达标', handleClick: this.toggleDimension },
        { mode: 1, name: '效果', handleClick: this.toggleDimension }
      ];
    }
  },
  created() {
    if (this.$route.query.type) {
      this.categoryId = Number(this.$route.query.type);
    }
    if (this.$route.query.dimension) {
      this.dimension = Number(this.$route.query.dimension);
    }
    this.getWeiboNum();
  },
  methods: {
    hasRouteAuth,
    tabClick(id) {
      this.$router.push({
        name: 'accounts',
        query: {
          type: id,
          dimension: this.dimension
        }
      });
    },
    getWeiboNum() {
      this.loading = true;
      getWeiboNum({ origin: this.dimension }).then(res => {
        if (res.code === 200) {
          this.data = res.data;
          this.loading = false;
        }
      }).catch(err => {
        this.loading = false;
        console.error(err.message);
      });
    },
    toggleDimension(type) {
      this.dimension = type;
    }
  }
};
</script>

<style lang="scss" scoped>
.accounts-box {
  .table-list {
    margin: 16px 16px 0;
    background-color: #fff;
    padding: 20px 20px 55px;
  }
}
</style>
